<template>
  <el-row :gutter="15" class="head">
    <el-form
      ref="elForm"
      :model="queryParams"
      size="mini"
      label-width="100px"
      label-position="left"
    >
      <el-col :span="24">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="仓库" prop="company">
              <el-select v-model="queryParams.wId" placeholder="请选择仓库" clearable>
                <el-option
                  v-for="(item, i) in depotList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="queryParams.phone"
                type="number"
                placeholder="请输入手机号码"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item label="财物状态" prop="pStatus">
              <el-select v-model="queryParams.pStatus" placeholder="请选择财物状态" clearable>
                <el-option
                  v-for="(item, i) in pStatusList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="办案人员名称" prop="peName" clearable>
              <el-input
                v-model="queryParams.peName"
                placeholder="请输入办案人员名称"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item label="财物类型" prop="pType">
              <el-select v-model="queryParams.pType" placeholder="请输入财物类型" clearable>
                <el-option
                  v-for="(item, i) in pTypeList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item label="财物名称" prop="pName">
              <el-input
                v-model="queryParams.pName"
                placeholder="请输入财物名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="登记时间" prop="time">
              <el-date-picker
                style="width: 45%; margin-right: 10%"
                clearable
                v-model="queryParams.pCreateTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
              >
              </el-date-picker>
              <el-date-picker
                style="width: 45%"
                clearable
                v-model="queryParams.pEndTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="2">
            <el-form-item size="large">
              <el-button type="primary" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item size="large">
              <el-button class="da" type="primary" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-form>
  </el-row>
</template>
<script>
import request from '@/utils/request.js'
export default {
  naem: 'FormData',
  components: {},
  props: {
    // 是否显示'处理列表'按钮
    register: {
      type: Boolean,
      default: true
    },
    // '处理列表'按钮名称
    buttonName: {
      type: String,
      default: '登记处置'
    },
    // 页数
    pageNum: {
      type: Number,
      default: 1
    },
    // 页大小
    pageSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      // 仓库列表
      depotList: [],
      // 状态列表
      pStatusList: [
        {
          value: 0,
          label: '没有任何操作'
        },
        {
          value: 1,
          label: '退还'
        },
        {
          value: 2,
          label: '移交'
        },
        {
          value: 3,
          label: '销毁'
        }
      ],
      // 物品类型
      pTypeList: [
        {
          value: 1,
          label: '普通物品'
        },
        {
          value: 2,
          label: '特殊物品'
        },
        {
          value: 3,
          label: '车辆'
        }
      ],
      // 查询参数
      queryParams: {
        // pageNum: 2,
        // pageSize: 2,
        // wId: null,
        // wName: null,
        // phone: null,
        // pStatus: null,
        // registerStatus: null,
        // peName: null,
        // pType: null,
        // pName: null,
        // pCreateTime: null,
        // registerStatus:null

        wId: null,
        phone: null,
        pStatus: null,
        peName: null,
        pType: null,
        pName: null,
        pCreateTime: null,
        pEndTime: null
      }
    }
  },
  computed: {},
  watch: {
    // queryParams: {
    //   deep: true,
    //   handler: function (newV, oldV) {
    //     console.log('watch中：', newV.wId)
    //   }
    // }
  },
  created() {},
  mounted() {
    // 获取仓库列表数据并处理
    request({
      url: '/system/warehouse/list',
      method: 'get'
    }).then((e) => {
      e.rows.forEach((i) => {
        this.depotList.push({ label: i.name, value: i.id })
      })
    })
    // 组件初始化触发搜索
    this.handleQuery()
  },
  methods: {
    // 点击最右侧按钮
    registerDispose() {
      this.$emit('registerDispose')
    },
    // 重置
    resetQuery() {
      for (const key in this.queryParams) {
        this.queryParams[key] = null
      }
      this.$emit("chonzhi")
    },
    // 搜索
    handleQuery() {
      this.$emit('handleQuery', {
        ...this.queryParams,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
.app-container {
  padding: 15px;
}
</style>
